<template>
  <div>
    <el-card shadow="never">
      <header-title title="购进信息"></header-title>
    </el-card>
    <el-card shadow="never">
      选择购进日期：
      <el-date-picker
        size="small"
        style="margin: 0 0 20px 0;"
        @change="changePurchaseDateValue"
        v-model="purchaseDateValue"
        :picker-options="pickerOptionsdate"
        type="date"
        placeholder="选择日"
      ></el-date-picker>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="猪肉" name="first">
          <el-row style="margin: 20px 0;border-bottom: 1px solid #eee;">
            <el-col :span="5">
              <card-item title="已填报数量">
                <template slot="number">
                  <div class="number">
                    <count-up :end-val="modal.porkExistPurchase"></count-up>
                  </div>
                </template>
              </card-item>
            </el-col>
            <el-col :span="5">
              <card-item title="未填报数量">
                <template slot="number">
                  <div class="number">
                    <count-up :end-val="modal.porkNotExistPurchase"></count-up>
                  </div>
                </template>
              </card-item>
            </el-col>
          </el-row>
          <div style="margin: 20px 0;">
            <header-title title="购进信息填报列表"></header-title>
            <el-table :data="meatData" v-loading="loading" style="width: 100%;margin: 15px 0 25px;">
              <el-table-column prop="name" label="商户名称"></el-table-column>
              <el-table-column prop="stallName" label="摊位名称"></el-table-column>
              <el-table-column prop="purchaseStatusName" label="填报状态"></el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    v-show="curDate === 1 && curDate !== 3"
                    @click="porkFill(scope.row)"
                    :disabled="scope.row.purchaseStatus !== 0"
                    type="text"
                    style="color:#eec823;"
                  >猪肉补填</el-button>
                  <el-button
                    v-show="curDate === 2 && curDate !== 3"
                    @click="porkFill(scope.row)"
                    :disabled="scope.row.purchaseStatus !== 0"
                    type="text"
                    style="color:#71dc80;"
                  >猪肉填报</el-button>
                  <el-button
                    @click="meatDetail(scope.row)"
                    :disabled="scope.row.purchaseStatus === 0"
                    type="text"
                    style="color:#3dc2c2;"
                  >猪肉详情</el-button>
                  <!-- <el-button @click="meatDetail(scope.row)" type="text" style="color:#3dc2c2;">猪肉详情</el-button> -->
                </template>
              </el-table-column>
              <div slot="empty">
                <img src="../../assets/blank_tip_page/blank_tip_page.png" alt />
              </div>
            </el-table>
            <el-pagination
              :page-size="meatPage.perPage"
              :current-page="meatPage.page"
              :total="meatPage.total"
              @current-change="changeMeatPage"
              style="margin-top: 15px;"
              background
              layout="prev, pager, next"
            ></el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="牛羊肉" name="second">
          <el-row style="margin: 20px 0;">
            <el-col :span="5">
              <card-item title="已填报数量">
                <template slot="number">
                  <div class="number">
                    <count-up :end-val="modal.beefExistPurchase"></count-up>
                  </div>
                </template>
              </card-item>
            </el-col>
            <el-col :span="5">
              <card-item title="未填报数量">
                <template slot="number">
                  <div class="number">
                    <count-up :end-val="modal.beefNotExistPurchase"></count-up>
                  </div>
                </template>
              </card-item>
            </el-col>
          </el-row>
          <div style="margin: 20px 0;">
            <header-title title="购进信息填报列表"></header-title>
            <el-table :data="meatData" v-loading="loading" style="width: 100%;margin: 15px 0 25px;">
              <el-table-column prop="name" label="商户名称"></el-table-column>
              <el-table-column prop="stallName" label="摊位名称"></el-table-column>
              <el-table-column prop="purchaseStatusName" label="填报状态"></el-table-column>
              <el-table-column label="操作" width="350">
                <template slot-scope="scope">
                  <el-button
                    v-show="curDate === 1 && curDate !== 3"
                    @click="beefFill(scope.row)"
                    :disabled="scope.row.purchaseStatus !== 0 && scope.row.purchaseStatus !== 3"
                    type="text"
                    style="color:#eec823;"
                  >牛肉补填</el-button>
                  <el-button
                    v-show="curDate === 2 && curDate !== 3"
                    @click="beefFill(scope.row)"
                    :disabled="scope.row.purchaseStatus !== 0 && scope.row.purchaseStatus !== 3"
                    type="text"
                    style="color:#71dc80;"
                  >牛肉填报</el-button>
                  <el-button
                    v-show="curDate === 1 && curDate !== 3"
                    @click="muttonFill(scope.row)"
                    :disabled="scope.row.purchaseStatus !== 0 && scope.row.purchaseStatus !== 2"
                    type="text"
                    style="color:#eec823;"
                  >羊肉补填</el-button>
                  <el-button
                    v-show="curDate === 2 && curDate !== 3"
                    @click="muttonFill(scope.row)"
                    :disabled="scope.row.purchaseStatus !== 0 && scope.row.purchaseStatus !== 2"
                    type="text"
                    style="color:#409EFF;"
                  >羊肉填报</el-button>
                  <el-button
                    @click="beefDetail(scope.row)"
                    :disabled="scope.row.purchaseStatus !== 2 && scope.row.purchaseStatus !== 1"
                    type="text"
                    style="color:#3dc2c2;"
                  >牛肉详情</el-button>
                  <el-button
                    @click="muttonDetail(scope.row)"
                    :disabled="scope.row.purchaseStatus !== 3 && scope.row.purchaseStatus !== 1"
                    type="text"
                    style="color:#409EFF;"
                  >羊肉详情</el-button>
                </template>
              </el-table-column>
              <div slot="empty">
                <img src="../../assets/blank_tip_page/blank_tip_page.png" alt />
              </div>
            </el-table>
            <el-pagination
              :page-size="meatPage.perPage"
              :current-page="meatPage.page"
              :total="meatPage.total"
              @current-change="changeMeatPage"
              style="margin-top: 15px;"
              background
              layout="prev, pager, next"
            ></el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="豆制品" name="third">
          <el-row style="margin: 20px 0;">
            <el-col :span="5">
              <card-item title="已填报数量">
                <template slot="number">
                  <div class="number">
                    <count-up :end-val="modal.soyExistPurchase"></count-up>
                  </div>
                </template>
              </card-item>
            </el-col>
            <el-col :span="5">
              <card-item title="未填报数量">
                <template slot="number">
                  <div class="number">
                    <count-up :end-val="modal.soyNotExistPurchase"></count-up>
                  </div>
                </template>
              </card-item>
            </el-col>
          </el-row>
          <div style="margin: 20px 0;">
            <header-title title="购进信息填报列表"></header-title>
            <el-table :data="meatData" v-loading="loading" style="width: 100%;margin: 15px 0 25px;">
              <el-table-column prop="name" label="商户名称"></el-table-column>
              <el-table-column prop="stallName" label="摊位名称"></el-table-column>
              <el-table-column prop="purchaseStatusName" label="填报状态"></el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    v-show="curDate === 1 && curDate !== 3"
                    @click="soyFill(scope.row)"
                    :disabled="scope.row.purchaseStatus !== 0"
                    type="text"
                    style="color:#eec823;"
                  >豆制品补填</el-button>
                  <el-button
                    v-show="curDate === 2 && curDate !== 3"
                    @click="soyFill(scope.row)"
                    :disabled="scope.row.purchaseStatus !== 0"
                    type="text"
                    style="color:#71dc80;"
                  >豆制品填报</el-button>
                  <el-button
                    @click="meatDetail(scope.row)"
                    :disabled="scope.row.purchaseStatus === 0"
                    type="text"
                    style="color:#3dc2c2;"
                  >豆制品详情</el-button>
                </template>
              </el-table-column>
              <div slot="empty">
                <img src="../../assets/blank_tip_page/blank_tip_page.png" alt />
              </div>
            </el-table>
            <el-pagination
              :page-size="meatPage.perPage"
              :current-page="meatPage.page"
              :total="meatPage.total"
              @current-change="changeMeatPage"
              style="margin-top: 15px;"
              background
              layout="prev, pager, next"
            ></el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="禽类" name="fourth">
          <el-row style="margin: 20px 0;">
            <el-col :span="5">
              <card-item title="已填报数量">
                <template slot="number">
                  <div class="number">
                    <count-up :end-val="modal.chickenExistPurchase"></count-up>
                  </div>
                </template>
              </card-item>
            </el-col>
            <el-col :span="5">
              <card-item title="未填报数量">
                <template slot="number">
                  <div class="number">
                    <count-up :end-val="modal.chickenNotExistPurchase"></count-up>
                  </div>
                </template>
              </card-item>
            </el-col>
          </el-row>
          <div style="margin: 20px 0;">
            <header-title title="购进信息填报列表"></header-title>
            <el-table :data="meatData" v-loading="loading" style="width: 100%;margin: 15px 0 25px;">
              <el-table-column prop="name" label="商户名称"></el-table-column>
              <el-table-column prop="stallName" label="摊位名称"></el-table-column>
              <el-table-column prop="purchaseStatusName" label="填报状态"></el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    v-show="curDate === 1 && curDate !== 3"
                    @click="chickenFill(scope.row)"
                    :disabled="scope.row.purchaseStatus !== 0"
                    type="text"
                    style="color:#eec823;"
                  >禽类补填</el-button>
                  <el-button
                    v-show="curDate === 2 && curDate !== 3"
                    @click="chickenFill(scope.row)"
                    :disabled="scope.row.purchaseStatus !== 0"
                    type="text"
                    style="color:#71dc80;"
                  >禽类填报</el-button>
                  <el-button
                    @click="meatDetail(scope.row)"
                    :disabled="scope.row.purchaseStatus === 0"
                    type="text"
                    style="color:#3dc2c2;"
                  >禽类详情</el-button>
                </template>
              </el-table-column>
              <div slot="empty">
                <img src="../../assets/blank_tip_page/blank_tip_page.png" alt />
              </div>
            </el-table>
            <el-pagination
              :page-size="meatPage.perPage"
              :current-page="meatPage.page"
              :total="meatPage.total"
              @current-change="changeMeatPage"
              style="margin-top: 15px;"
              background
              layout="prev, pager, next"
            ></el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="蛋类" name="five">
          <el-row style="margin: 20px 0;">
            <el-col :span="5">
              <card-item title="已填报数量">
                <template slot="number">
                  <div class="number">
                    <count-up :end-val="modal.eggExistPurchase"></count-up>
                  </div>
                </template>
              </card-item>
            </el-col>
            <el-col :span="5">
              <card-item title="未填报数量">
                <template slot="number">
                  <div class="number">
                    <count-up :end-val="modal.eggNotExistPurchase"></count-up>
                  </div>
                </template>
              </card-item>
            </el-col>
          </el-row>
          <div style="margin: 20px 0;">
            <header-title title="购进信息填报列表"></header-title>
            <el-table :data="meatData" v-loading="loading" style="width: 100%;margin: 15px 0 25px;">
              <el-table-column prop="name" label="商户名称"></el-table-column>
              <el-table-column prop="stallName" label="摊位名称"></el-table-column>
              <el-table-column prop="purchaseStatusName" label="填报状态"></el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    v-show="curDate === 1 && curDate !== 3"
                    @click="eggFill(scope.row)"
                    :disabled="scope.row.purchaseStatus !== 0"
                    type="text"
                    style="color:#eec823;"
                  >蛋类补填</el-button>
                  <el-button
                    v-show="curDate === 2 && curDate !== 3"
                    @click="eggFill(scope.row)"
                    :disabled="scope.row.purchaseStatus !== 0"
                    type="text"
                    style="color:#71dc80;"
                  >蛋类填报</el-button>
                  <el-button
                    @click="meatDetail(scope.row)"
                    :disabled="scope.row.purchaseStatus === 0"
                    type="text"
                    style="color:#3dc2c2;"
                  >蛋类详情</el-button>
                </template>
              </el-table-column>
              <div slot="empty">
                <img src="../../assets/blank_tip_page/blank_tip_page.png" alt />
              </div>
            </el-table>
            <el-pagination
              :page-size="meatPage.perPage"
              :current-page="meatPage.page"
              :total="meatPage.total"
              @current-change="changeMeatPage"
              style="margin-top: 15px;"
              background
              layout="prev, pager, next"
            ></el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="蔬菜" name="six">
          <el-row style="margin: 20px 0;">
            <el-col :span="5">
              <card-item title="已填报数量">
                <template slot="number">
                  <div class="number">
                    <count-up :end-val="modal.vegeExistPurchase"></count-up>
                  </div>
                </template>
              </card-item>
            </el-col>
            <el-col :span="5">
              <card-item title="未填报数量">
                <template slot="number">
                  <div class="number">
                    <count-up :end-val="modal.vegeNotExistPurchase"></count-up>
                  </div>
                </template>
              </card-item>
            </el-col>
          </el-row>
          <div style="margin: 20px 0;">
            <header-title title="购进信息填报列表"></header-title>
            <el-table :data="meatData" v-loading="loading" style="width: 100%;margin: 5px 0 5px;">
              <el-table-column prop="name" label="商户名称"></el-table-column>
              <el-table-column prop="stallName" label="摊位名称"></el-table-column>
              <el-table-column prop="purchaseStatusName" label="填报状态"></el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    v-show="curDate === 1 && curDate !== 3"
                    @click="vegeFill(scope.row)"
                    :disabled="scope.row.purchaseStatus !== 0"
                    type="text"
                    style="color:#eec823;"
                  >蔬菜补填</el-button>
                  <el-button
                    v-show="curDate === 2 && curDate !== 3"
                    @click="vegeFill(scope.row)"
                    :disabled="scope.row.purchaseStatus !== 0"
                    type="text"
                    style="color:#71dc80;"
                  >蔬菜填报</el-button>
                  <el-button
                    @click="meatDetail(scope.row)"
                    :disabled="scope.row.purchaseStatus === 0"
                    type="text"
                    style="color:#3dc2c2;"
                  >蔬菜详情</el-button>
                </template>
              </el-table-column>
              <div slot="empty">
                <img src="../../assets/blank_tip_page/blank_tip_page.png" alt />
              </div>
            </el-table>
            <el-pagination
              :page-size="meatPage.perPage"
              :current-page="meatPage.page"
              :total="meatPage.total"
              @current-change="changeMeatPage"
              style="margin-top: 15px;"
              background
              layout="prev, pager, next"
            ></el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <el-dialog title="添加购进记录" :visible.sync="meatDialog" v-if="meatDialog">
      <div>
        <el-form
          v-if="businessType === 1"
          :model="meatModal"
          :rules="rules"
          ref="ruleForm"
          label-width="200px"
        >
          <el-form-item label="点击添加商品基本信息" prop="products">
            <el-button @click="purchaseProductClick" type="text" style="color:#3dc2c2;" v-model="proinfo">点击添加商品基本信息</el-button>
          </el-form-item>
          <el-form-item prop="products" ref="products">
            <el-table :data="productsPushArr" border style="width: 100%;margin: -25px 0 20px;">
              <el-table-column prop="name" label="商品名称"></el-table-column>
              <el-table-column prop="weight" label="重量(千克)"></el-table-column>
              <el-table-column prop="price" label="价格(元/千克)"></el-table-column>
            </el-table>
          </el-form-item>
          <el-form-item label="进货人：" prop="businessName">
            <el-input v-model="meatModal.businessName"></el-input>
          </el-form-item>
          <el-form-item label="交易凭证号：" prop="transactionNumber">
            <el-input v-model="meatModal.transactionNumber"></el-input>
          </el-form-item>
          <el-form-item label="肉品品质检验合格证号：" prop="meatCheckCertificateNumber">
            <el-input v-model="meatModal.meatCheckCertificateNumber"></el-input>
          </el-form-item>
          <el-form-item label="动物产品检疫合格证号：" prop="animalProductCheckCertificateNumber">
            <el-input v-model="meatModal.animalProductCheckCertificateNumber"></el-input>
          </el-form-item>
          <el-form-item label="红票交易凭证：">
            <el-row>
              <el-col :span="6">
                <el-upload
                  class="upload-demo"
                  ref="redUpload"
                  action="https://upload.qiniup.com"
                  :on-remove="handleRemove"
                  :on-success="handleSuccess"
                  list-type="picture"
                  :limit="1"
                  :data="uploadToken"
                  :before-upload="beforeUpload"
                >
                  <el-button size="small" type="primary">点击上传</el-button>
                  <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png/jpeg文件，且不超过2m</div> -->
                </el-upload>
              </el-col>
              <!-- <el-col :span="18">
                <el-input v-model="meatModal.redTicket" size="medium"></el-input>
              </el-col>-->
            </el-row>
          </el-form-item>
          <el-form-item label="白票交易凭证：">
            <el-row>
              <el-col :span="6">
                <el-upload
                  class="upload-demo"
                  action="https://upload.qiniup.com"
                  :on-remove="handleRemove"
                  :on-success="whiteSuccess"
                  ref="whiteTicket"
                  list-type="picture"
                  :limit="1"
                  :data="uploadToken"
                  :before-upload="beforeUpload"
                >
                  <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
              </el-col>
              <!-- <el-col :span="18">
                <el-input v-model="meatModal.whiteTicket" size="medium"></el-input>
              </el-col>-->
            </el-row>
          </el-form-item>
          <el-form-item label="进货渠道：" prop="purchaseChannels">
            <my-select
              ref="purchaseMySelect"
              url="api/v1/backend/purchase/supplierList"
              @selected="mySelectedPurchaseChannels"
            ></my-select>
          </el-form-item>
        </el-form>


        <el-form
          v-if="businessType !== 1"
          :model="meatModal"
          :rules="rules"
          ref="ruleForm"
          label-width="200px"
        >
          <el-form-item label="点击添加商品基本信息" prop="products" key="1">
            <el-button @click="purchaseProductClick" type="text" style="color:#3dc2c2;">点击添加商品基本信息</el-button>
          </el-form-item>
          <el-form-item prop="products" ref="products" key="2">
            <el-table :data="productsPushArr" border style="width: 100%;margin: -25px 0 20px;">
              <el-table-column prop="name" label="商品名称"></el-table-column>
              <el-table-column prop="weight" label="重量(千克)"></el-table-column>
              <el-table-column prop="price" label="价格(元/千克)"></el-table-column>
            </el-table>
          </el-form-item>
          <el-form-item label="进货人：" prop="businessName" key="3">
            <el-input v-model="meatModal.businessName"></el-input>
          </el-form-item>
          <el-form-item
            v-if="businessType === 9"
            label="肉品品质检验合格证号："
            prop="meatCheckCertificateNumber"
            key="4"
          >
            <el-input v-model="meatModal.meatCheckCertificateNumber"></el-input>
          </el-form-item>
          <el-form-item
            v-if="businessType === 9"
            label="动物产品检疫合格证号："
            prop="animalProductCheckCertificateNumber"
            key="5"
          >
            <el-input v-model="meatModal.animalProductCheckCertificateNumber"></el-input>
          </el-form-item>
          <el-form-item label="交易凭证：" key="6">
            <el-row>
              <el-col :span="6">
                <el-upload
                  class="upload-demo"
                  ref="redUpload"
                  action="https://upload.qiniup.com"
                  :on-remove="handleRemove"
                  :on-success="handleSuccess"
                  list-type="picture"
                  :limit="1"
                  :data="uploadToken"
                  :before-upload="beforeUpload"
                >
                  <el-button size="small" type="primary">点击上传</el-button>
                  <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png/jpeg文件，且不超过2m</div> -->
                </el-upload>
              </el-col>
              <!-- <el-col :span="18">
                <el-input v-model="meatModal.redTicket" size="medium"></el-input>
              </el-col>-->
            </el-row>
          </el-form-item>
        </el-form>

      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="meatCancel">取 消</el-button>
        <el-button type="primary" @click="meatSubmit('ruleForm')">提交{{businessTypeName}}购进记录</el-button>
      </div>
    </el-dialog>


    <el-dialog
      id="detail-dialog"
      title="购进记录详情"
      :visible.sync="meatDetailDiglog"
      @close="meatDetailClose"
    >
      <div v-loading="loading">
        <el-card style="margin: 15px 0;">
          <p slot="header" class="ptitle">基本信息</p>
          <el-row>
            <el-col :span="12">
              <p class="pnumber">进货人：{{defaultValue(meatDetailModal.businessName,'没有填写相关信息')}}</p>
              <p class="pnumber">摊位号：{{defaultValue(meatDetailModal.stallName,'没有填写相关信息')}}</p>
              <p class="pnumber">电话：{{defaultValue(meatDetailModal.phone,'没有填写相关信息')}}</p>
              <p class="pnumber">采购时间：{{defaultValue(meatDetailModal.purchaseTime,'没有填写相关信息')}}</p>
            </el-col>
            <el-col :span="12">
              <div v-show="businessType === 1">
                <p>
                  <el-button
                    v-show="meatDetailModal.whiteTicket !== ''"
                    @click="whiteTicketDialog = true"
                    :disabled="meatDetailModal.whiteTicket === ''"
                    type="text"
                    style="color:#71dc80;"
                  >点击查看白票图片</el-button>
                </p>
                <p>
                  <el-button
                    v-show="meatDetailModal.whiteTicket === ''"
                    @click="whiteTicketDialog = true"
                    :disabled="meatDetailModal.whiteTicket === ''"
                    type="text"
                  >没有上传白票图片</el-button>
                </p>
                <p>
                  <el-button
                    v-show="meatDetailModal.redTicket !== ''"
                    @click="redTicketDialog = true"
                    :disabled="meatDetailModal.redTicket === ''"
                    type="text"
                    style="color:#3dc2c2;"
                  >点击查看红票图片</el-button>
                </p>
                <p>
                  <el-button
                    v-show="meatDetailModal.redTicket === ''"
                    @click="redTicketDialog = true"
                    :disabled="meatDetailModal.redTicket === ''"
                    type="text"
                  >没有上传红票图片</el-button>
                </p>
              </div>
              <div v-show="businessType !== 1">
                <p>
                  <el-button
                    v-show="meatDetailModal.redTicket !== ''"
                    @click="redTicketDialog = true"
                    :disabled="meatDetailModal.redTicket === ''"
                    type="text"
                    style="color:#3dc2c2;"
                  >点击查看交易凭证</el-button>
                </p>
                <p>
                  <el-button
                    v-show="meatDetailModal.redTicket === ''"
                    @click="redTicketDialog = true"
                    :disabled="meatDetailModal.redTicket === ''"
                    type="text"
                  >没有上传交易凭证</el-button>
                </p>
              </div>
            </el-col>
          </el-row>
          <div>
            <el-table :data="meatDetailModal.products" border style="width: 100%">
              <el-table-column prop="selectedGoodsName" label="商品名称"></el-table-column>
              <el-table-column prop="price" label="单价(元)"></el-table-column>
              <el-table-column prop="weight" label="重量(kg)"></el-table-column>
              <el-table-column prop="total" label="小计(元)"></el-table-column>
            </el-table>
          </div>
        </el-card>
        <el-card style="margin: 15px 0;">
          <p slot="header" class="ptitle">供货商</p>
          <p class="pnumber">供货商：{{defaultValue(meatDetailModal.supplierName,'没有填写相关信息')}}</p>
        </el-card>
        <el-card style="margin: 15px 0;">
          <p slot="header" class="ptitle">附加信息</p>
          <p class="pnumber">交易凭证号：{{defaultValue(meatDetailModal.transactionNumber,'没有填写相关信息')}}</p>
          <p
            class="pnumber"
            v-show="businessType === 1 || businessType === 9"
          >肉品品质检验合格证号：{{defaultValue(meatDetailModal.meatCheckCertificateNumber,'没有填写相关信息')}}</p>
          <p
            class="pnumber"
            v-show="businessType === 1 || businessType === 9"
          >动物产品检疫合格证号：{{defaultValue(meatDetailModal.animalProductCheckCertificateNumber,'没有填写相关信息')}}</p>
        </el-card>
      </div>
    </el-dialog>
    <el-dialog title="查看白票图片" :visible.sync="whiteTicketDialog" width="51%" center>
      <div style="width: 100%;">
        <img :src="meatDetailModal.whiteTicket" style="width: 100%;" />
      </div>
    </el-dialog>
    <el-dialog title="查看红票图片" :visible.sync="redTicketDialog" width="51%" center>
      <div style="width: 100%;">
        <img :src="meatDetailModal.redTicket" style="width: 100%;" />
      </div>
    </el-dialog>


    <el-dialog title="添加商品基本信息" :visible.sync="purchaseProductDialog" v-if="purchaseProductDialog">
      <div>
        <el-form :model="meatProductsModal" :rules="rules2" ref="ruleForm3" label-width="200px">
          <el-form-item label="在售商品：" prop="goodsName">
            <el-select
              v-model="meatProductsModal.goodsName"
              @change="goodsNameSelected"
              placeholder="请选择"
            >
              <el-option
                v-for="item in goodsNameData"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="重量(kg)：" prop="weight">
            <el-input v-model="meatProductsModal.weight"></el-input>
          </el-form-item>
          <el-form-item label="单价(元/kg)：" prop="price">
            <el-input v-model="meatProductsModal.price"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="purchaseProductCancel">取 消</el-button>
        <el-button type="primary" @click="purchaseProductSubmit">提交添加商品的基本信息</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import HeaderTitle from "@/components/HeaderTitle";
import CountUp from "@/components/CountUp/index";
import CardItem from "@/components/CardItem/index.vue";
import MySelect from "@/components/MySelect";
import { formatDate, formatDate2, isNil } from "@/utils";
export default {
  name: "PurchaseInfo",
  components: {
    HeaderTitle,
    CountUp,
    CardItem,
    MySelect
  },
  data() {
    let products=(rule, value, callback) => {
      // console.log(this.meatModal.products)
      if ( this.meatModal.products== null) {
        callback(new Error("请输入商品信息"));
      }else {
        callback();
      }
    };

    return {
      productsPushArr: [], // 购进时填写多个商品信息的数组
      purchaseProductDialog: false, // 购进时填写多个商品信息弹框
      purchaseProductModal: {}, // 购进时填写多个商品信息弹框

      whiteTicketDialog: false,
      redTicketDialog: false,
      proinfo:"",
      purchaseDateValue: formatDate(new Date()), // 选择购进日期 日
      // 选择日 的限制
      pickerOptionsdate: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6;
        }
      },

      curDate: 2, // 当前日期

      uploadToken: {
        key: "",
        token: ""
      },

      meatData: [],
      meatPage: {
        perPage: 10, // 每页显示10条
        page: 1, // 当前页
        total: 0
      },

      // 填报
      meatDialog: false,
      meatModal: {},
      meatProductsModal: {},
      // chooseDateData: [], // 日期数组
      goodsNameData: [], // 在售商品列表

      // 详情
      meatDetailDiglog: false,
      meatDetailModal: {},

      loading: true,
      activeName: "first",
      businessType: 1,
      businessTypeName: "猪肉",

      modal: {
        porkExistPurchase: 0, //猪肉已填报数量
        porkNotExistPurchase: 0, //猪肉未填报数量
        beefExistPurchase: 0, //牛羊肉已填报数量
        beefNotExistPurchase: 0, //牛羊肉未填报数量
        soyExistPurchase: 0, //豆制品已填报数量
        soyNotExistPurchase: 0, //豆制品未填报数量
        chickenExistPurchase: 0, //禽类已填报数量
        chickenNotExistPurchase: 0, //禽类未填报数量
        eggExistPurchase: 0, //蛋类已填报数量
        eggNotExistPurchase: 0, //蛋类未填报数量
        vegeExistPurchase: 0, //	int	蔬菜已填报数量
        vegeNotExistPurchase: 0 //	int	蔬菜未填报数量
      },

      rules: {
        products: [
          { required: true, validator: products,
            trigger: "change"}
        ],
       
        transactionNumber: [
          {
            required: true,
            message: "请输入20位交易凭证号",
            trigger: "change"
          },
          {
            pattern: /^\d{20}$/,
            message: "只能输入20位数字",
            trigger: "change"
          }
        ],
        meatCheckCertificateNumber: [
          {
            required: true,
            message: "请输入10位肉品品质检验合格证号",
            trigger: "change"
          },
          {
            pattern: /^\d{10}$/,
            message: "只能输入10位数字",
            trigger: "change"
          }
        ],
        purchaseChannels: [
          { required: true, message: "不能为空", trigger: "change" }
        ]
      },
      rules2: {
        weight: [
          { required: true, message: "请输入重量", trigger: "change" },
          {
            pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/,
            message: "重量是整数或两位小数",
            trigger: "change"
          }
        ],
        price: [
          { required: true, message: "请输入单价", trigger: "change" },
          {
            pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/,
            message: "价格是整数或两位小数",
            trigger: "change"
          }
        ]
      }
    };
  },
  watch: {
    "$store.state.app.marketId"(val, oldVal) {
      this.getPurchaseCountInfo(this.purchaseDateValue);
      this.getMeatList(
        this.purchaseDateValue,
        this.businessType,
        this.meatPage.perPage,
        this.meatPage.page
      );
    }
  },
  mounted() {
    this.goodsToken();
    this.getBusinessTypes();
    this.getPurchaseCountInfo(this.purchaseDateValue);
    this.getMeatList(
      this.purchaseDateValue,
      this.businessType,
      this.meatPage.perPage,
      this.meatPage.page
    );
  },
  methods: {
    defaultValue(value, defaultValue) {
      if (isNil(value)) {
        return defaultValue;
      }
      return value;
    },
    // 改变日期
    changePurchaseDateValue(date) {
      const newDate = formatDate2(date);
      if (this.showText(newDate) === 2) {
        this.curDate = 2; // 当天
      } else if (this.showText(newDate) === 1) {
        this.curDate = 1; // 前五天
      } else if (this.showText(newDate) === 3) {
        this.curDate = 3; // 超过五天
      }
      this.purchaseDateValue = formatDate(date);
      this.meatModal.date = this.purchaseDateValue;
      this.getMeatList(
        formatDate(date),
        this.businessType,
        this.meatPage.perPage,
        this.meatPage.page
      );
      this.getPurchaseCountInfo(formatDate(date));
    },
    showText(timeString) {
      let date = new Date(timeString);
      let today = new Date();
      today.setHours(0);
      today.setMinutes(0);
      today.setSeconds(0);
      // today 为今天凌晨的时间
      let dayTime = 24 * 60 * 60 * 1000;
      let delta = today - date; // 得到相差的时间 ms
      if (delta > 0) {
        if (delta <= 5 * dayTime) {
          return 1; // 前五天
        }
      } else if (-delta < dayTime) {
        return 2; // 当天
      }
      return 3; // 超过五天
    },
    handleSuccess(res, file, fileList) {
      this.meatModal.redTicket =
        "http://cailanzi.image.cailanzi001.com/" + res.key;
      this.$refs.redUpload.clearFiles();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList[0]);
    },
    beforeUpload(file) {
      const isPNG = file.type === "image/png";
      const isJPEG = file.type === "image/jpeg";
      const isJPG = file.type === "image/jpg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isPNG && !isJPEG && !isJPG) {
        this.$message.error("上传头像图片只能是 jpg、png、jpeg 格式!");
        return false;
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
        return false;
      }
      //将上传的文件名保存成key,把这个key拼接到外链地址
      const date = new Date();
      this.uploadToken.key = `bill${date.getFullYear()}${date.getMonth() +
        1}${date.getDate()}${date.getHours()}${date.getMinutes()}${date.getSeconds()}${Math.floor(
        Math.random() * 100
      )}.${file.type.split("/")[1]}`;
    },
    //获取上传文件时候的token
    goodsToken() {
      this.$store
        .dispatch("purchaseInfo/uptoken", {})
        .then(data => {
          this.uploadToken.token = data.data.uptoken;
        })
        .catch(err => {});
    },

    whiteSuccess(res, file, fileList) {
      this.meatModal.whiteTicket =
        "http://cailanzi.image.cailanzi001.com/" + res.key;
      this.$refs.whiteTicket.clearFiles();
    },

    // 所有Meat列表
    getMeatList(date, businessType, perPage, page) {
      this.$store
        .dispatch("purchaseInfo/fetchMeatList", {
          date,
          businessType,
          perPage,
          page
        })
        .then(data => {
          this.loading = false;
          this.meatData = data.data.items;
          this.meatPage.total = data.data.total;
        })
        .catch(err => {
          this.loading = false;
          this.meatData = [];
          this.meatPage.total = 0;
        });
    },
    changeMeatPage(num) {
      this.meatPage.page = num;
      this.getMeatList(
        this.purchaseDateValue,
        this.businessType,
        this.meatPage.perPage,
        num
      );
    },
    handleClick(tab, event) {
      this.loading = true;
      this.meatModal = {};
      this.productsPushArr = [];
      if (tab.name === "first") {
        this.meatPage.page = 1;
        this.meatData = [];
        this.businessType = 1;
        if (this.businessType === 1) {
          this.businessTypeName = "猪肉";
        }
        this.getMeatList(
          this.purchaseDateValue,
          this.businessType,
          this.meatPage.perPage,
          this.meatPage.page
        );
        this.getPurchaseCountInfo(this.purchaseDateValue);
      } else if (tab.name === "second") {
        this.meatPage.page = 1;
        this.meatData = [];
        this.businessType = 9;
        if (this.businessType === 9) {
          this.businessTypeName = "牛羊肉";
        }
        this.getMeatList(
          this.purchaseDateValue,
          this.businessType,
          this.meatPage.perPage,
          this.meatPage.page
        );
        this.getPurchaseCountInfo(this.purchaseDateValue);
      } else if (tab.name === "third") {
        this.meatPage.page = 1;
        this.meatData = [];
        this.businessType = 11;
        if (this.businessType === 11) {
          this.businessTypeName = "豆制品";
        }
        this.getMeatList(
          this.purchaseDateValue,
          this.businessType,
          this.meatPage.perPage,
          this.meatPage.page
        );
        this.getPurchaseCountInfo(this.purchaseDateValue);
      } else if (tab.name === "fourth") {
        this.meatPage.page = 1;
        this.meatData = [];
        this.businessType = 3;
        if (this.businessType === 3) {
          this.businessTypeName = "禽类";
        }
        this.getMeatList(
          this.purchaseDateValue,
          this.businessType,
          this.meatPage.perPage,
          this.meatPage.page
        );
        this.getPurchaseCountInfo(this.purchaseDateValue);
      } else if (tab.name === "five") {
        this.meatPage.page = 1;
        this.meatData = [];
        this.businessType = 10;
        if (this.businessType === 10) {
          this.businessTypeName = "蛋类";
        }
        this.getMeatList(
          this.purchaseDateValue,
          this.businessType,
          this.meatPage.perPage,
          this.meatPage.page
        );
        this.getPurchaseCountInfo(this.purchaseDateValue);
      } else if (tab.name === "six") {
        this.meatPage.page = 1;
        this.meatData = [];
        this.businessType = 0;
        if (this.businessType === 0) {
          this.businessTypeName = "蔬菜";
        }
        this.getMeatList(
          this.purchaseDateValue,
          this.businessType,
          this.meatPage.perPage,
          this.meatPage.page
        );
        this.getPurchaseCountInfo(this.purchaseDateValue);
      }
    },
    // 获取需要手动填报的经营品类
    getBusinessTypes() {
      this.$store
        .dispatch("purchaseInfo/fetchBusinessTypes")
        .then(data => {
          // console.log(data)
        })
        .catch(err => {});
    },
    // 获取已/未填报数量
    getPurchaseCountInfo(date) {
      this.$store
        .dispatch("purchaseInfo/fetchPurchaseCountInfo", { date })
        .then(data => {
          this.modal.porkExistPurchase = data.data.porkExistPurchase;
          this.modal.porkNotExistPurchase = data.data.porkNotExistPurchase;
          this.modal.beefExistPurchase = data.data.beefExistPurchase;
          this.modal.beefNotExistPurchase = data.data.beefNotExistPurchase;
          this.modal.soyExistPurchase = data.data.soyExistPurchase;
          this.modal.soyNotExistPurchase = data.data.soyNotExistPurchase;
          this.modal.chickenExistPurchase = data.data.chickenExistPurchase;
          this.modal.chickenNotExistPurchase =
            data.data.chickenNotExistPurchase;
          this.modal.eggExistPurchase = data.data.eggExistPurchase;
          this.modal.eggNotExistPurchase = data.data.eggNotExistPurchase;
          this.modal.vegeExistPurchase = data.data.vegeExistPurchase;
          this.modal.vegeNotExistPurchase = data.data.vegeNotExistPurchase;
        })
        .catch(err => {});
    },
    // 点击猪肉填报
    porkFill(row) {
      // 查询指定商户购进状态
      // this.$store.dispatch('purchaseInfo/getPurchaseStatus',{businessId}).then(
      //   data => {
      //     console.log(data.data)
      //     // businessType: 1  // 经营品类id
      //     // purchaseStatus: 0  // 0:未填报，1:已填报，2:牛肉已填报，3:羊肉已填报
      //   }
      // ).catch(err => {})
      this.productsPushArr = [];
      this.meatDialog = true;
      this.meatModal.businessId = row.id;
      this.meatModal = Object.assign({
        businessId: row.id,
        typeId: 6,
        date: this.purchaseDateValue
      });
      this.getProductList(this.meatModal.businessId, this.meatModal.typeId);
      // this.getChooseDate()
    },
    // 获取购进日期
    // getChooseDate(){
    //   this.$store.dispatch('purchaseInfo/getChooseDate',{}).then(
    //     data => {
    //       const items = data.data
    //       this.chooseDateData = items
    //     }
    //   ).catch(err => {})
    // },
    // 获取在售商品列表
    getProductList(businessId, typeId) {
      this.$store
        .dispatch("purchaseInfo/getProductList", { businessId, typeId })
        .then(data => {
          const items = data.data;
          for (let i = 0; i < items.length; i++) {
            items[i].value = items[i].id;
            items[i].label = items[i].goods_name;
          }
          this.goodsNameData = items;
        })
        .catch(err => {});
    },
    // 购进日期
    // chooseDateSelected(value){
    //   this.meatProductsModal.date = value
    // },
    // 在售商品 Id
    goodsNameSelected(value) {
      this.meatProductsModal.id = value;
      let obj = {};
      obj = this.goodsNameData.find(item => {
        // 这里的goodsNameData就是上面遍历的数据源
        return item.id === value; //筛选出匹配数据
      });
      this.meatProductsModal.name = obj.label;
    },
    // 猪肉进货渠道
    mySelectedPurchaseChannels(obj) {
      this.meatModal = Object.assign(
        { purchaseChannels: obj.label },
        this.meatModal
      );
    },
    purchaseProductClick() {
      this.meatProductsModal = {};
      this.proinfo='0'
      this.purchaseProductDialog = true;
    },
    // 提交填报的每个商品信息
    purchaseProductSubmit() {
      let that=this
      this.$refs["ruleForm3"].validate(valid => {
        if (valid) {
          this.purchaseProductDialog = false;
          this.meatProductsModal.weight =
            parseInt(this.meatProductsModal.weight) || 0;
          this.meatProductsModal.price =
            parseInt(this.meatProductsModal.price) || 0;
          delete this.meatProductsModal.goodsName;
          this.productsPushArr.push(this.meatProductsModal);
          // this.meatModal = Object.assign({products: JSON.stringify(this.productsPushArr)},this.meatModal)
          this.meatModal.products = JSON.stringify(this.productsPushArr);
          this.proinfo="1"
          // console.log(this.meatModal.products)
          that.$refs["products"].clearValidate();
        } else {
          this.$message({
            type: "error",
            message: "有必填项未填"
          });
        }
      });
    },
    // 提交肉类填报
    meatSubmit(ruleForm) {
       this.$refs["ruleForm"].validate(valid => {
          if (valid) {
      if (this.businessType === 1) {
       
            this.meatDialog = false;
            this.$store
              .dispatch("purchaseInfo/fetchMeatSubmit", this.meatModal)
              .then(res => {
                if (res.data) {
                  this.$message({
                    type: "success",
                    message: "填报成功，请刷新!"
                  });
                }
                this.meatModal = {};
                this.meatProductsModal = {};
                this.$refs["redUpload"].clearFiles();
                this.getMeatList(
                  this.purchaseDateValue,
                  this.businessType,
                  this.meatPage.perPage,
                  this.meatPage.page
                );
                this.resetForm("ruleForm");
                this.$refs["purchaseMySelect"].clear();
              })
              .catch(err => {
                console.log(err);
              });
          
      } else {
        if (!this.meatModal.products) {
          this.$message({
            type: "error",
            message: "请填写商品信息！"
          });
        } else {
          this.meatDialog = false;
          this.$store
            .dispatch("purchaseInfo/fetchMeatSubmit", this.meatModal)
            .then(res => {
              if (res.data) {
                this.$message({
                  type: "success",
                  message: "填报成功，请刷新!"
                });
              }
              this.meatModal = {};
              this.meatProductsModal = {};
              this.$refs["redUpload"].clearFiles();
              this.getMeatList(
                this.purchaseDateValue,
                this.businessType,
                this.meatPage.perPage,
                this.meatPage.page
              );
              this.resetForm("ruleForm3");
              this.$refs["purchaseMySelect"].clear();
            })
            .catch(err => {
              console.log(err);
            });
        }
      }
      } else {
            this.$message({
              type: "error",
              message: "有必填项未填"
            });
          }
        });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    meatCancel() {
      this.meatModal = {};
      this.meatDialog = false;
      this.resetForm("ruleForm");
      // this.$refs['purchaseMySelect'].clear()
    },
    purchaseProductCancel() {
      this.meatProductsModal = {};
      this.purchaseProductDialog = false;
    },
    meatDetailClose() {
      this.meatDetailDiglog = false;
      this.meatDetailModal = {};
    },

    // 点击填报详情 猪肉 豆制品 禽类 蛋类
    meatDetail(row) {
      this.meatDetailDiglog = true;
      this.loading = true;
      const businessId = row.id;
      this.getMeatDetail(this.purchaseDateValue, businessId, 0);
    },
    // 获取填报详情 猪肉 豆制品 禽类 蛋类
    getMeatDetail(date, businessId, type) {
      this.$store
        .dispatch("purchaseInfo/getMeatDetail", { date, businessId, type })
        .then(data => {
          this.loading = false;
          this.meatDetailModal = Object.assign({}, data.data);
        })
        .catch(err => {});
    },

    /**
     * 牛羊肉
     */
    // 点击牛肉填报
    beefFill(row) {
      // console.log(row)
      this.productsPushArr = [];
      this.meatDialog = true;
      this.meatModal.businessId = row.id;
      this.meatModal = Object.assign({
        businessId: row.id,
        typeId: 1,
        date: this.purchaseDateValue
      });
      this.getProductList(this.meatModal.businessId, this.meatModal.typeId);
      // this.getChooseDate()
    },
    // 点击牛肉详情
    beefDetail(row) {
      this.meatDetailDiglog = true;
      const businessId = row.id;
      this.getMeatDetail(this.purchaseDateValue, businessId, 1);
    },

    // 点击羊肉填报
    muttonFill(row) {
      // console.log(row)
      this.productsPushArr = [];
      this.meatDialog = true;
      this.meatModal.businessId = row.id;
      this.meatModal = Object.assign({
        businessId: row.id,
        typeId: 2,
        date: this.purchaseDateValue
      });
      this.getProductList(this.meatModal.businessId, this.meatModal.typeId);
      // this.getChooseDate()
    },
    // 点击羊肉详情
    muttonDetail(row) {
      this.meatDetailDiglog = true;
      const businessId = row.id;
      this.getMeatDetail(this.purchaseDateValue, businessId, 2);
    },

    /**
     * 豆制品
     */
    // 点击豆制品填报
    soyFill(row) {
      this.productsPushArr = [];
      this.meatDialog = true;
      this.meatModal.businessId = row.id;
      this.meatModal = Object.assign({
        businessId: row.id,
        typeId: 3,
        date: this.purchaseDateValue
      });
      this.getProductList(this.meatModal.businessId, this.meatModal.typeId);
      // this.getChooseDate()
    },

    /**
     * 禽类
     */
    // 点击禽类填报
    chickenFill(row) {
      this.productsPushArr = [];
      this.meatDialog = true;
      this.meatModal.businessId = row.id;
      this.meatModal = Object.assign({
        businessId: row.id,
        typeId: 4,
        date: this.purchaseDateValue
      });
      this.getProductList(this.meatModal.businessId, this.meatModal.typeId);
      // this.getChooseDate()
    },

    /**
     * 蛋类
     */
    // 点击蛋类填报
    eggFill(row) {
      this.productsPushArr = [];
      this.meatDialog = true;
      this.meatModal.businessId = row.id;
      this.meatModal = Object.assign({
        businessId: row.id,
        typeId: 5,
        date: this.purchaseDateValue
      });
      this.getProductList(this.meatModal.businessId, this.meatModal.typeId);
      // this.getChooseDate()
    },

    /**
     * 蔬菜
     */
    // 点击蔬菜填报
    vegeFill(row) {
      this.productsPushArr = [];
      this.meatDialog = true;
      this.meatModal.businessId = row.id;
      this.meatModal = Object.assign({
        businessId: row.id,
        typeId: 7,
        date: this.purchaseDateValue
      });
      this.getProductList(this.meatModal.businessId, this.meatModal.typeId);
      // this.getChooseDate()
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/ .el-table__empty-text {
  width: 100%;
}
#detail-dialog {
  .ptitle {
    color: #00cbe4;
    font-size: 16px;
  }
  .pnumber {
    margin: 15px 10px;
    font-size: 14px;
  }
  /deep/.el-dialog__body {
    padding: 0px 20px 30px;
    color: #606266;
    font-size: 14px;
  }
  /deep/.el-card__header {
    padding: 10px 20px 0;
    border-bottom: 1px solid #ebeef5;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
}
</style>
